<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<script src="../js/lib/jquery/jquery-1.3.2.min.js"></script>
		<script src="../js/lib/plugins/jquery.tools.min.js"></script>
		<script src="../js/lib/plugins/jquery.mousewheel.js"></script>
		<style>
			div.scrollable {   
			     
			    /* required settings */ 
			    position:relative; 
			    overflow:hidden;     
			 
			    /* vertical scrollers have typically larger height than width */     
			    height: 307px;      
			    width: 116px;     
			} 
			 
			/* root element for scrollable items */ 
			div.scrollable div.items {     
			    position:absolute; 
			     
			    /* this time we have very large space for height */     
			    height:20000em;     
			}
			div.items > div{
				width : 100px;
				height : 100px;
				background : #AAA;
				text-align : center;
				margin : 2px 0;
			}
		</style>
		<script> 
			// execute your scripts when DOM is ready. this is a good habit 
			$(function() {         
			         
			    // initialize scrollable  
			    $("div.scrollable").scrollable({ 
			        vertical : true,  
			        size: 3
			    });     
			     
			}); 
		</script>
	</head>
	<body>
		<!-- root element for scrollable --> 
		<div class="scrollable vertical"> 
		      
		    <!-- root element for the items --> 
		    <div class="items"> 
		        <div class="active">0</div>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  
		        <div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>  <div>9</div>  
		        <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div>  
		    </div> 
		     
		</div>
	</body>
</html>
